<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../js/jquery-1.8.3.js"></script>
	<style>
	body{
		margin: 0;
		padding: 0;
	}
	</style>
	<script type="text/javascript">
	$(function(){
//		$("#m2").hide();
//		$("#m1").mouseover(function(){
//			$("#m2").show(600);
//		})
//		$("#m1").mousemove(function(e){
//			$("#m2").css({"left":e.pageX,"top":e.pageY});
//		})
//		$("#m1").mouseout(function(){
//			$("#m2").hide(600);
//		})
//		$("#m1").mouseover(function(){
//			$("#m1").clone().appendTo("#m1").css({
//				"position":"absolute",
//				"width":"780px",
//				"height":"330px"
//			}).show(600);
//		})
	})
	</script>
</head>
<body>
<div id="img1" style="width:234px;height:99px;">
	<img src="../img/top1.png" alt="" style="width:234px;height:99px;float:left;">
</div>
	<script>

		var a="35";
		console.log(typeof (a));
		var b=21;
		console.log(typeof (b));
		c = a+b;
		console.log(c);
		console.log(typeof (c));
		console.log("................")
		var d = "44";
		console.log(typeof(d));
		d = 44;
		console.log(typeof(d));

		$("#img1").mouseover(function(e){
			var left = e.pageX;
			var top = e.pageY;
			//var bigImg="<img class='img2' src='../img/top1.png' alt='' style='width:468px;height:198px;float:left;position: absolute;top: "+top+"px;left: "+left+"px;'>"
			var bigImg="<div class='img2' style='width:468px;height:198px;position: absolute;'><img src='../img/top1.png' alt='' style='float:left;'></div>"
			$("body").append(bigImg);
			$(".img2").css({"top":e.pageY,"left":e.pageX}).show("fast");
		});

		$("#img1").mousemove(function(e){
			$(".img2").css({"top":e.pageY,"left":e.pageX}).show("fast");
		});
		$("#img1").mouseout(function(){
			$(".img2").remove();
		});





	</script>

</body>
</html>